<template>
	<div>
		<flexbox 
			v-show="selectionList.length == 0" 
			class="th-container">
		</flexbox>
		<flexbox
			v-if="selectionList.length > 0"
			class="selection-bar">
				<div class="selected—title">已选中<span class="selected—count">{{ selectionList.length }}</span>项</div>
				<flexbox class="selection-items-box">
					<flexbox
						v-for="(item, index) in getSelectionHandleItemsInfo()"
						:key="index"
						class="selection-item"
						@click.native="selectionBarClick(item.type)">
						<img
							:src="item.icon"
							class="selection-item-icon" >
						<div class="selection-item-name">{{ item.name }}</div>
					</flexbox>
				</flexbox>
		</flexbox>
		
			
		<!-- 员工 -->
		<relate-empoyee 
			:visible.sync="transferDialogShow" 
			:type="type"
			:radio="radio"
			title="请选择员工"
			@save="employeesSave" />
			
	</div>
</template>

<script type="text/javascript">
	import { mapGetters } from 'vuex'
	
	
	// 员工组件
	import RelateEmpoyee from '@/views/setting/auth/components/relateEmpoyee'
	
	// API
	import { filterIndexfields } from '@/api/setting/setting'
	import {
		crmCustomerDelete,
		crmCustomerTransfer,
		crmCustomerAlloc,
		crmCustomerReceive,
		crmCustomerThrow,
		crmCustomerTeamSave,
		crmContactsDel
	} from '@/api/customer/customer'
	import { crmLawcaseDelete } from '@/api/lawcase/lawcase'
	import { crmRecordDelete } from '@/api/customer/common'
	export default {
		name: 'CRMTableHead', 
		components: {
			RelateEmpoyee
		},
		props: {
			crmType: {
				type: String,
				default: ''
			},
			actiontype: {
				type: [String,Number],
				default: ''
			},
			// 辅助 使用 公海没有场景
			isSeas: {
				type: Boolean,
				default: false
			},
			isSea: {
				type: Boolean,
				default: false
			},
			
			showHegihtSearch: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				// 勾选操作数据
				selectionList: [],
				transferDialogShow: false,
				// 场景操作
				showScene: false, 
				sceneData: {id: '', bydata: '', name: ''},
				// 高级筛选
				showFilter: false,
				filterObj: [],
				filterArr: [],
				fieldList:[],
				type:'',
				radio:true
			}
		},
		computed: {
			...mapGetters(['allAuth'])
		},
		mounted() {},
		methods: {
			/** 选择了场景 */
			sceneSelect(data) {
				this.sceneData = data
				this.$emit('scene', data)
			},
			
			/** 勾选后的表头操作 */
			headSelectionChange(array) {
			  this.selectionList = array
			},
			
			/** 获取默认场景名字 */
			getDefaultSceneName() {
				return '全部'
			},
			
			/** 展示高级筛选 */
			showFilterClick() {
				this.getFilterFieldInfo()
			},
			
			/** 获取高级筛选字段数据 */
			getFilterFieldInfo() {
				filterIndexfields({
						types: 'crm_' + this.crmType
					})
					.then(res => {
						this.fieldList = res.data
						this.showFilter = true
					})
					.catch(() => {})
			},
			
			/** 高级筛选操作 */
			handleFilter(item) {
				// return console.log(item)
				this.filterObj = item.form
				this.filterArr = item.obj
				this.showFilter = false
				this.$emit('filter', item.obj)
			},
			
			/** 高级筛选项目操作 */
			handleDeleteField(data) {
				this.filterObj = data.obj
				const obj = []
				this.filterObj.forEach(o => {
					obj.push({
						search_v: o.value,
						search_f: o.field,
						search_t: o.form_type
					})
				})
				this.$emit('filter', obj)
			},
			
			/** 获取展示items */
			getSelectionHandleItemsInfo() {
				const handleInfos = {
					transfer: {
						name: '转移',
						type: 'transfer',
						icon: require('@/assets/img/selection_transfer.png')
					},
					export: {
						name: '导出选中',
						type: 'export',
						icon: require('@/assets/img/selection_export.png')
					},
					delete: {
						name: '删除',
						type: 'delete',
						icon: require('@/assets/img/selection_delete.png')
					},
					alloc: {
						name: '分配',
						type: 'alloc',
						icon: require('@/assets/img/selection_alloc.png')
					},
					get: {
						name: '领取',
						type: 'get',
						icon: require('@/assets/img/selection_get.png')
					},
					throw: {
						name: '放入公海池',
						type: 'throw',
						icon: require('@/assets/img/selection_disable.png')
					},
					
				}
				if (this.crmType == 'customer') {
					if (this.isSeas) {
						return this.forSelectionHandleItems(handleInfos, [
							'alloc',
							'get',
							'export',
							'delete'
						])
					}else if (this.actiontype == 11 || this.actiontype == 12) {
						return this.forSelectionHandleItems(handleInfos, [
							'export',
							'delete'
						])
					}else {
						return this.forSelectionHandleItems(handleInfos, [
							'transfer',
							'throw',
							'export',
							'delete'
						])
					}
				}else{
					return this.forSelectionHandleItems(handleInfos, [
						'export',
						'delete'
					])
				}
			},
			
			forSelectionHandleItems(handleInfos, array) {
				var tempsHandles = []
				for (let index = 0; index < array.length; index++) {
					const type = array[index]
					if (this.whetherTypeShowByPermision(type)) {
						tempsHandles.push(handleInfos[type])
					}
				}
				
				return tempsHandles
			},
			
			// 判断是否展示
			whetherTypeShowByPermision(type) {
				if (type == 'export') {
					if (this.isSeas) {
						return this.allAuth[this.crmType].poolexcelexport
					}
					return this.allAuth[this.crmType].excelexport
					
				} else if (type == 'delete') {
					if(this.actiontype == 11) {
						return this.allAuth[this.crmType].del_contacts
					}else if (this.actiontype == 12) {
						return this.allAuth[this.crmType].dellog				
					}
					return this.allAuth[this.crmType].delete
				} else if (type == 'alloc') {
					// 分配(公海)
					return this.allAuth[this.crmType].distribute
				} else if (type == 'get') {
					return this.allAuth[this.crmType].receive
				} else if (type == 'close') {
					return this.allAuth[this.crmType].close
				}else{
					return this.allAuth[this.crmType][type]
				}
			
				return true
			},
			
			/** 操作 */
			selectionBarClick(type) {
				if (type == 'transfer' || type == 'alloc') {
					// 转移
					this.transferDialogShow = true
					this.type = type
				} else if (type == 'export') {
					const params = {}
				
					params['id'] = this.selectionList.map(item => {
						return item['id']
					})
					params.__export = true
					this.$emit('exportData', params)
				} else if (
					type == 'throw' ||
					type == 'delete' ||
					type == 'get' 
				) {
					var message = ''
					if (type == 'throw') {
						message = '确定放入到公海吗?'
					} else if (type == 'delete') {
						message = '确定要删除这些数据吗?'
					} else if (type == 'get') {
						message = '确定要领取该客户吗?'
					} else {
						message = '确定要进行此操作吗?'
					}
					this.$confirm(message, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
				    .then(() => {
						this.confirmHandle(type)
				    })
				    .catch(() => {
						this.$message({
							type: 'info',
							message: '已取消操作'
						})
				    })
				}
			},
			
			confirmHandle(type) {
				if (type === 'delete') {
					const self = this
					var ids = this.selectionList.map(function(item, index, array) {
						return item['id']
					})
					let request
					if (this.actiontype == 11) {
						request = crmContactsDel
					}else if (this.actiontype == 12) {
						request = crmRecordDelete
					}else {
						request = crmCustomerDelete
					}
					request({
					  id: ids
					})
					.then(res => {
						this.$message({
							type: 'success',
							message: res.data
						})
						this.$emit('handle', { type: type })
					  })
					  .catch(() => {})
				} else if (type === 'get') {
					// 领取
					var customer_id = this.selectionList.map(function(item, index, array) {
						return item.id
					})
					
					crmCustomerReceive({
						id: customer_id
					})
					  .then(res => {
						this.$message({
							type: 'success',
							message: res.data
						})
						this.$emit('handle', { type: type })
					  })
					  .catch(() => {})
				} else if (type === 'closeshare') {
					// 取消分享
					var id = this.selectionList.map(function(item, index, array) {
						return item.id
					})
					
					crmCustomerShare({
						id: id,
						type:2
					})
					  .then(res => {
						this.$message({
							type: 'success',
							message: res.data
						})
						this.$emit('handle', { type: type })
					  })
					  .catch(() => {})
				}else if (type === 'throw') {
					// 放入公海
					var id = this.selectionList.map(function(item, index, array) {
						return item.id
					})
					
					crmCustomerThrow({
						id: id
					})
					  .then(res => {
						this.$message({
							type: 'success',
							message: res.data
						})
						this.$emit('handle', { type: type })
					  })
					  .catch(() => {})
				}
			},
			
			/**
			 * 转移客户
			 */
			employeesSave(val) {
				if(!val.type) return
				let request
				let owner_user_id
				if (val.type == 'alloc') {
					request = crmCustomerAlloc
				} else if(val.type == 'transfer'){
					request = crmCustomerTransfer
				} else if(val.type == 'save_team'){
					request = crmCustomerTeamSave
				}
				
				request({
						id: this.selectionList.map(function(data) {
							return data.id
						}),
						owner_user_id: val.users[0].id
					})
					.then(res => {
						this.$message.success(res.data)
						this.transferDialogShow = false
						this.$emit('handle', { type: val.type })
					})
					.catch(() => {})
				
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/styles/xr-theme.scss";

	.th-container {
		font-size: 13px;
		height: 5px;
		padding: 0 20px;
	}

	/** 场景和筛选 */
	.condition_title {
		cursor: pointer;
	}

	.condition_title:hover {
		color: $xr-color-primary;
	}

	.m-arrow {
		margin: 0 8px;
	}

	.c-filtrate {
		margin: 0 10px 0 30px;
		width: 12px;
	}

	/** 勾选操作 */
	.selection-bar {
		font-size: 12px;
		height: 50px;
		padding: 0 20px;
		color: #777;

		.selected—title {
			flex-shrink: 0;
			padding-right: 20px;
			border-right: 1px solid $--table-border-color;

			.selected—count {
				color: $xr-color-primary;
			}
		}
	}

	.selection-items-box {
		overflow-x: auto;
		overflow-y: hidden;

		.selection-item {
			width: auto;
			padding: 15px;
			flex-shrink: 0;

			.selection-item-icon {
				display: block;
				margin-right: 5px;
				width: 15px;
				height: 15px;
			}

			.selection-item-name {
				cursor: pointer;
				color: #777;
			}

			.selection-item-name:hover {
				color: $xr-color-primary;
			}
		}
	}
</style>
